import React, { useState } from "react";
import { NavLink, useNavigate } from "umi";
import {
    MehOutlined
  } from '@ant-design/icons';
import "./Countdown.css"

interface Props {
  message: string;
  timeout: number;
}

interface State {
  remainingTime: number;
}

// 修改 CountdownAlert 类组件为函数式组件
function CountdownAlert(props: Props) {
  const [remainingTime, setRemainingTime] = useState(props.timeout); // 使用 useState 定义 remainingTime 状态
  const navigate = useNavigate(); // 获取 navigate 方法

  // 定义 handleCountdownEnd 函数，在倒计时结束后执行
  function handleCountdownEnd() {
    navigate('../SetupManagement/UpdateCache'); // 使用 navigate 方法进行页面跳转
  }

  // 使用 useEffect 方法实现每秒减少 remainingTime 的功能
  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setRemainingTime((time) => time - 1);
    }, 1000);

    if (remainingTime === 0) {
      clearInterval(intervalId);
      handleCountdownEnd();
    }

    return () => clearInterval(intervalId);
  }, [remainingTime]);

  // 渲染 CountdownAlert 组件
  return (
    <div>
      <p>{props.message}</p>
      <p>{remainingTime}s</p>
    </div>
  );
}

function App() {
  const [showAlert, setShowAlert] = useState(true);

  return (
    <div className="PromptBox">
      <div className="Promtitle">
        <h3>信息提示</h3>
      </div>
      <div className="Prommin">
        <p>
          <MehOutlined style={{ fontSize: "24px", color: "#58DC99", marginRight: "8px" }} />站点设置缓存更新完成
        </p>
      </div>
      <div className="Promjump">
        <p>
          页面自动<NavLink to="../SetupManagement/UpdateCache" style={{color:"#09f"}}>跳转</NavLink>等待时间:
        </p>
        <div className="jump">
          {showAlert && <CountdownAlert message="" timeout={3} />}
        </div>
      </div>
    </div>
  );
}

export default App;